<template>
  <div id="iLogin">
    <div class="info">
      <div class="title">{{ title }}</div>
      <div class="subtitle">{{ subtitle }}</div>
    </div>
    <div class="form">
      <div class="title">用户登录</div>
      <div class="body">
        <el-form ref="form" :model="form">
          <el-form-item label="账户 | Account">
            <el-input type="text" v-model="form.phoneOrName"></el-input>
          </el-form-item>
          <el-form-item label="密码 | Password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-switch v-model="remember_me" active-text="记住密码"></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="action">
        <el-button type="primary" :loading="loading" icon="el-icon-right" size="max" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as storage from '../utils/storage'
import setting from '../setting'
import * as api from '../api/private/login'
export default {
  name: 'iLogin',
  data: () => ({
    title: '',
    subtitle: '冰测科技',
    form: {
      phoneOrName: '',
      password: ''
    },
    loading: false,
    remember_me: null
  }),
  watch: {
    remember_me(newVal) {
      storage.set(true, 'remember_me', newVal)
    }
  },
  methods: {
    init() {
      this.setTitle()
      this.getStatus()
    },
    setTitle() {
      this.title = setting.app_name
    },
    getStatus() {
      this.remember_me = JSON.parse(storage.get(true, 'remember_me'))
      if (this.remember_me) {
        this.autoLogin()
      }
    },
    async login() {
      const data = await api.logIn(this.form)
      if (data.code === 0) {
        this.$msg.success(`${data.data.username}，你好啊！`)
        //  设置UName、UID、Token
        storage.set(this.remember_me, 'user_name', data.data.username)
        storage.set(this.remember_me, 'user_id', data.data.userId)
        storage.set(this.remember_me, setting.app_token_key, data.data.token)
        //  路由跳转首页
        this.$router.push({ name: setting.app_main_page })
      } else {
        this.$msg.error(`${data.msg}`)
      }
    },
    autoLogin() {
      if (storage.get(this.remember_me, setting.app_token_key) !== null) {
        this.$router.push({ name: setting.app_main_page })
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.$ebs.$on('EnterEvent', () => {
      this.login()
    })
  }
}
</script>

<style lang="scss" scoped>
#iLogin {
  box-sizing: border-box;
  width: 80rem;
  height: 20rem;
  position: relative;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);

  .info {
    position: absolute;
    width: 55%;
    height: 100%;
    background: white;
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: row wrap;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);

    .title {
      margin-bottom: 2rem;
      width: 100%;
      font-size: 4rem;
    }

    .subtitle {
      width: 100%;
      font-size: 2rem;
    }
  }

  .form {
    box-sizing: border-box;
    position: absolute;
    width: 40%;
    right: 0;
    top: 50%;
    transform: translateY(-40%);
    background: white;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    padding: 2rem;

    .title {
      width: 100%;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .body {
      width: 100%;
    }
  }
}
</style>
